<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>EASY后台-首页</title>
    <link rel="icon" th:href="@{/static/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/static/css/common.css}">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
</head>
<body>
<div class="layui-fluid">
    <blockquote class="layui-elem-quote layui-text" style="background-color: #e2e2e2;">
        <i class="layui-icon layui-icon-notice"></i><span style="margin-left: 15px;">欢迎访问OZO-EASY后台管理系统！</span>
    </blockquote>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">用户</div>
                <div class="layui-card-body">
                    总人数：[[${count.userNum}]]<br>
                    在线数：[[${count.onlineUserNum}]]
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">文件</div>
                <div class="layui-card-body">
                    总数：[[${count.fileNum}]]<br>
                    头像数：[[${count.avatarFileNum}]]
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">日志</div>
                <div class="layui-card-body">
                    总数：[[${count.logNum}]]<br>
                    异常数：[[${count.failLogNum}]]
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">周访问统计</div>
                <div class="layui-card-body">
                    <div id="echarts" style="width: 100%; height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">公告</div>
                <div class="layui-card-body">
                    <div class="layui-timeline">
                        <div class="layui-timeline-item" th:each="notice : ${noticeList}">
                            <i class="layui-icon layui-timeline-axis layui-icon-fire"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title"><a href="javascript:" th:onclick="noticeDetail([[${notice.id}]])"><p th:text="${notice.publishTime + '&nbsp;&nbsp;&nbsp;' + notice.title}"></p></a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/static/layui/layui.js}"></script>
<script th:src="@{/static/echarts/echarts.min.js}"></script>
<script th:inline="javascript">
    layui.use(['layer', 'element'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;

        window.noticeDetail = function (id) {
            layer.open({
                type: 2,
                area: ['500px', '400px'],
                title: '通知详情',
                shadeClose: true,
                scrollbar: false,
                content: '/sysNotice/detailForm/' + id
            });
        }

        var echartsRecords = echarts.init(document.getElementById('echarts'), 'walden');
        var option = {
            xAxis: {
                type: 'category',
                data: [[${tjt.days}]]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [[${tjt.nums}]],
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: '#16baaa'
                        },
                    }
                }
            ]
        };
        echartsRecords.setOption(option);

        setInterval(() => {
            echartsRecords.resize();
        }, 500);

        window.onresize = function () {
            echartsRecords.resize();
        }
    });
</script>
</body>
</html>